import { memo, useState } from 'react';
import { Avatar, Tooltip } from 'antd';
import { ToolbarStyle } from './style';
import { serverURL, userInfo } from '../../config';
// import { MenuIconList } from '../../utils/icons';

const Toolbar = memo(() => {
	// const [currentIcon, setCurrentIcon] = useState<string>('icon-message');

	return (
		<ToolbarStyle>
			<div className="info">
				<Avatar className="avatar" shape="square" src={serverURL + userInfo.avatar} />
			</div>
			<div className="icon-list">
				<ul className="top-icons">
					{/* {MenuIconList.slice(0, 5).map((item) => {
						return (
							<Tooltip key={item.text} placement="left" title={item.text}>
								<li
									className={`iconfont ${item.icon}`}
									onClick={() => {
										if (item.text === '聊天' || item.text === '通讯录') {
											setCurrentIcon(item.icon);
											// navigate(item.text === '聊天' ? '/chat' : '/address-book');
										}
									}}
									style={{
										color: currentIcon === item.icon ? '#009a4a' : '#979797'
									}}
								></li>
							</Tooltip>
						);
					})} */}
				</ul>
			</div>
		</ToolbarStyle>
	);
});

export default Toolbar;
